<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分奖励兑换</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
            color: #333;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 5px;
            color: #555;
        }
        input[type="text"],
        input[type="number"],
        textarea,
        input[type="submit"] {
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        input[type="submit"] {
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #218838;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>积分奖励兑换</h2>
    <form id="redeemForm">
        <label for="residentId">居民ID:</label>
        <input type="number" id="residentId" name="residentId" required>

        <label for="rewardId">奖励ID:</label>
        <input type="number" id="rewardId" name="rewardId" required>

        <input type="submit" value="兑换奖励">
    </form>

    <h3>可用积分</h3>
    <table id="pointsTable">
        <thead>
        <tr>
            <th>居民ID</th>
            <th>积分</th>
        </tr>
        </thead>
        <tbody>
        <!-- 积分数据将在这里动态插入 -->
        </tbody>
    </table>

    <h3>可用奖励</h3>
    <table id="rewardsTable">
        <thead>
        <tr>
            <th>奖励ID</th>
            <th>奖励名称</th>
            <th>所需积分</th>
        </tr>
        </thead>
        <tbody>
        <!-- 奖励数据将在这里动态插入 -->
        </tbody>
    </table>
</div>

<script>
    // 获取所有积分记录
    function fetchPoints() {
        fetch('http://localhost:8081/waste/api/points/getAll')
            .then(response => response.json())
            .then(points => {
                const tableBody = document.querySelector('#pointsTable tbody');
                tableBody.innerHTML = ''; // 清空表格内容

                points.forEach(point => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
              <td>${point.residentId}</td>
              <td>${point.points}</td>
          `;
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                alert('获取积分数据失败，请检查网络连接！');
                console.error('Error:', error);
            });
    }

    // 获取所有奖励物品
    function fetchRewards() {
        fetch('http://localhost:8081/waste/api/rewards/getAll')
            .then(response => response.json())
            .then(rewards => {
                const tableBody = document.querySelector('#rewardsTable tbody');
                tableBody.innerHTML = ''; // 清空表格内容

                rewards.forEach(reward => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
              <td>${reward.rewardId}</td>
              <td>${reward.rewardName}</td>
              <td>${reward.requiredPoints}</td>
          `;
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                alert('获取奖励数据失败，请检查网络连接！');
                console.error('Error:', error);
            });
    }

    // 兑换奖励
    document.getElementById('redeemForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        const data = {
            residentId: formData.get('residentId'),
            rewardId: formData.get('rewardId')
        };

        fetch('http://localhost:8081/waste/api/redeem', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(responseData => {
                if (responseData.success) {
                    alert('奖励兑换成功！');
                    fetchPoints(); // 刷新积分列表
                } else {
                    alert('兑换失败，请检查输入信息：' + responseData.message);
                }
            })
            .catch(error => {
                alert('兑换失败，请检查网络连接！');
                console.error('Error:', error);
            });
    });

    // 页面加载时调用
    window.onload = function() {
        fetchPoints();
        fetchRewards();
    };
</script>
</body>
</html>